<template>
    <div id="popularisland">
        <div class="popular-island-title">
            <h3>人气海岛</h3>
            <router-link to='' class='hsnohz'>
                <i class="el-icon-paperclip">&nbsp;廉航预定指南</i>
            </router-link>
        </div>
        <div class="ul-box">
          <div class="ul-discountInfo">
            <ul>
              <li v-for='item in landdiscount'>
                <div class='landimgInfo'>
                    <img :src="item.img" alt="">
                    <div class="land-img-info">
                        <p class="land-name">
                            {{ item.info }}
                        </p>
                        <p class="land-name-en">
                            {{ item.info2 }}
                        </p>
                    </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
    </div>
</template>


<script type="text/javascript">
    
    export default {
        name:'popularisland',
        data(){
            return {
               landdiscount:[
                    {
                        img:require('@/assets/place/land1.jpg'),
                        info:'普吉岛',
                        info2:'Phuket Island'
                    },
                    {
                        img:require('@/assets/place/land2.jpg'),
                        info:'巴厘岛',
                        info2:'Bali'
                    },
                    {
                        img:require('@/assets/place/land3.jpg'),
                        info:'长滩岛',
                        info2:'Boracay'
                    },
                    {
                        img:require('@/assets/place/land4.jpg'),
                        info:'马尔代夫',
                        info2:'Maldives'
                    },
                    {
                        img:require('@/assets/place/land1.jpg'),
                        info:'普吉岛',
                        info2:'Phuket Island'
                    }
                ]
            }
        }
    }


</script>


<style type="text/css" lang='less'>
    #popularisland{
        padding:0 0.8em;
        .popular-island-title{
            display: flex;
            justify-content:space-between;
            h3{
                margin:0;
            }
            .hsnohz{
                color:#11bf79;
            }
        }
        .ul-box{
            margin:1em 0;
            height:130px;
            overflow-y:hidden;
            .ul-discountInfo{
            height:220px;
            overflow: auto;          
            ul{
                height:220px;
                list-style-type: none;
                margin:0;
                width:920px;
                padding:0 1em;
                overflow-x: auto;
                overflow-y: hidden;
                li{
                    box-shadow: 0 10px 10px 0 rgba(0,0,0,.15);
                    margin-right: 8px;
                    float:left;
                    white-space: nowrap;
                    .landimgInfo{
                        background-color:transparent;
                        position:relative;
                        width:165px;
                        img{
                            position:relative;
                            top: 9px;
                            width:100%;
                            height:115px;
                            border-radius:8px;
                        }
                        .land-img-info{
                            position:absolute;
                            bottom:-5px;
                            width:100%;
                            text-align:center;
                            padding:2em 1em;
                            font-size:1.2em;
                            color:white;
                            overflow:hidden;
                            white-space:nowrap;
                            text-overflow: ellipsis;
                            p{
                                margin:0;
                            }
                        }
                    }
                }
            }
          }
        }
    }
</style>
